<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="CYW">
    <title></title>
    <style>
        body{
            margin: 0 auto;
        }
        .clock{
            color: white;
            margin:300px auto;
            width: 300px;
            background-color: black;
            text-align: center;
        } 
        span{
            display: inline-block;
            border:2px solid #999;
             margin:20px; 
            padding: 0 10px;
            background-color: white;
            color: black;
        } 
        button{
            margin: 10px;
        }
    </style>
</head>
<body>
     <div class="clock">
         <p><span>00</span>分<span>05</span>秒</p>
            <button type="button">开始计时器</button>
     </div>
</body>
</html>
<script>
    var btn = document.querySelector('button');
    //   布尔 控制开始或是暂停
       var timer = null;
       var isBegin = false;
       var isEnd = false;
      btn.onclick = function(){

          if(isEnd==true){
               return;
          }

        isBegin = !isBegin
          if (isBegin) {
            // 等于true表示已经开始 ， 按钮变暂停
            btn.innerHTML = '暂停倒计时';
            // 启用定时器每隔一秒钟更新一次时间
            timer = setInterval(start,1000);
          } else {
            //  等于 false 让按钮变成开始
            btn.innerHTML = '开始倒计时';
            clearInterval(timer);
          } 
      }
      function start(){
          var spans = document.querySelectorAll('span');
        //   获取时间（分钟+秒数）转化为秒数
        // 字符串spans[0].innerHTML   *分数变成 num
          var allTimes = spans[0].innerHTML*60+spans[1].innerHTML*1; 
          
         //当计时结束 清空定时器 不能点击开始按钮  
            if(allTimes == 0){
                clearInterval(timer);
                return;
            }

            allTimes --;
             if (allTimes == 0) {
                 isEnd = true;
                 btn.innerHTML = '计时结束';
                 
             }
            // 把减少之后的时间秒数转化 分钟数 和 秒数
            //    60=1; 70=1:10
            var minutes = parseInt(allTimes/60);
            var seconds = allTimes%60;
           
        spans[0].innerHTML = minutes<10 ? '0'+minutes : minutes;
        spans[1].innerHTML = seconds<10 ? '0'+seconds : seconds;
               }
</script>